<template>
  <div class="head" aria-label="A complete example of page header">
    <el-page-header @back="onBack">
      <template #content>
        <div class="flex items-center">
          <el-avatar class="mr-3" :size="32" :src="store.info.avatarUrl" />
          <span class="text-sm mr-2">
            &nbsp;
            {{ store.info.username }}
          </span>
          <el-tag class="icon">在线</el-tag>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
          <el-button @click="changeInfo">修改信息</el-button>
          <el-button type="primary" class="ml-2" @click="exit">退出</el-button>
        </div>
      </template>
    </el-page-header>
    <el-divider> </el-divider>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { userInfo } from "@/store/user.js";
const store = userInfo();
const router = useRouter();
const onBack = () => {
  router.go(-1);
};
// 修改个人信息
const changeInfo = () => {
  router.push({ name: "changeUser" });
};
// 退出登陆
const exit = () => {
  // 清楚本地token
  localStorage.removeItem("token");
  router.push({ name: "load" });
};
</script>
<style scoped lang="less">
.head {
  padding-top: 20px;
}

.items-center {
  position: relative;
  display: flex;
  align-items: center;
}

.text-sm {
  height: 22px;
}

.icon {
  position: absolute;
  right: -45px;
  top: 10px;
  padding: 0 5px;
  font-size: 10px;
}
</style>